import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Card, List, Button, Divider, Row, Col, Icon, Form, Input, message } from 'antd';

import ArticleList from '../Article/List';
import PageHeader from 'ant-design-pro/lib/PageHeader';

import styles from './index.less';

const FormItem = Form.Item;

import Fetch from '../../../common/fetch';

class CarConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            articles: [],
        };
    }
    componentDidMount() {
        const { match } = this.props;
        Fetch({
            url: '/nnc/vehicle/article',
            data: {
                carId: match.params.carId || '',
            },
            method: 'GET',
        }).then((res) => {
            if (res && res.code === 0) {
                this.setState({
                    articles: res.data,
                });
            } else {
                message.error(res.msgs || '获取失败');
            }
        }).catch((err) => {
            console.log(err);
            message.error('获取失败');
        });
    }
    render() {
        const { articles } = this.state;
        const { match } = this.props;

        return (
            <div>
                <PageHeader
                    title='车辆配置信息'
                    content='车辆配置信息'
                    breadcrumbList={[
                        {
                            title: '车库',
                            href: '/vehicle',
                        },
                        {
                            title: '型号列表',
                            href: `/vehicle/brand/${match.params.brandId}`,
                        },
                        {
                            title: '相关文章',
                        },
                    ]}
                    linkElement={Link}
                    className={styles.pageHeader}
                />
                <div className={`${styles.content} ${styles['home-container']}`}>
                    <Card style={{ margin: 24 }} bordered={false}>
                        <ArticleList
                            data={articles}
                        />
                    </Card>
                </div>
            </div>
        );
    }
}

export default CarConfig;